<template>
  <div class="protectCollapse">
    <el-divider content-position="left">{{$t('自身防护管理')}}</el-divider>
    <BasicsTools :dataList='record'></BasicsTools>
    <el-divider content-position="left">{{$t('管理口访问方式管理')}}</el-divider>
    <ManagementTools :dataList='record'></ManagementTools>
    <el-divider content-position="left">{{$t('业务口是否允许管理面数据处理')}}</el-divider>
    <ServiceTools :dataList='record' @protectSwitch="init()"></ServiceTools>
  </div>
</template>
<script>
import { getAccessInfo } from '@/api/safe/access/protect'
import ManagementTools from './components/ManagementTools'
import BasicsTools from './components/BasicsTools'
import ServiceTools from './components/ServiceTools'
import Cookies from 'js-cookie'
export default {
  name: 'protect',
  components: {
    ManagementTools,
    BasicsTools,
    ServiceTools
  },
  data () {
    return {
      activeNames: ['1', '2', '3'],
      record: {
        forward: '',
        iface: {},
        input: {},
        mgmt: '',
        scan_defense: '',
        src: ''
      }
    }
  },
  created () {
   this.init();
  },
  mounted () {
    const old_port = Cookies.get('old_port')
    if (old_port) {
      Cookies.remove('alert_id' + old_port)
      Cookies.remove('system_key' + old_port)
      Cookies.remove('userInfo' + old_port)
      Cookies.remove('roleList' + old_port)
      Cookies.remove('Oem' + old_port)
      Cookies.remove('old_port')
    }
  },
  methods: {
    init() {
      getAccessInfo().then(res => {
      if (res.status === 0) {
        this.record = res.info[0]
      }
    })
    }
  }
}
</script>
<style lang="less">
.protectCollapse {
  margin: 20px auto;
  padding-top: 1px;
  max-width: 1000px;
  .el-divider__text {
    font-size: 18px;
    font-weight: 600;
  }
  .el-divider {
    margin: 30px 0;
  }
}
</style>
